<!--
//
// ResourceFile.vue
// hs-admin
//
// Created by 区区电脑 on 2023/04/23.
//
-->
<template>
    <div class="ResourceFile">
        <!-- 文件 -->
        <div v-if="file&&file.size" class="file" @click="chooseFile">
            <div>
                {{file.name}}
            </div>
        </div>
        <!-- 文件上传占位 -->
        <div v-else class="choose" @click="chooseFile">
            <span>添加文件</span>
        </div>
        <!-- 进度条 -->
        <div class="progress-bar">
            <!-- 上传中 -->
            <el-progress v-if="progress > 0 && progress < 1" :percentage="progressRate"/>
            <!-- 上传成功 -->
            <el-progress v-if="progress === 1" :percentage="progressRate" status="success"/>
            <!-- 上传失败 -->
            <el-progress v-if="progress === -1" :percentage="progressRate" status="exception"/>
        </div>
        <!-- 操作项 -->
        <div v-if="file&&file.size" class="actions">
            <!--<el-button link size="small" type="primary" @click="preview">查看</el-button>-->
            <el-button link size="small" type="danger" @click="remove">移除</el-button>
        </div>
    </div>
</template>

<script>

export default {
    name: "ResourceFile",
    emits: ["change"],
    props: {
        info: {
            type: Object,
            default: () => {
            }
        }
    },
    data() {
        return {
            progress: -2,
            file: {}
        }
    },
    computed: {
        progressRate() {
            const progress = this.progress;
            if (progress === -1) return 0
            if (progress === 0) return 0
            if (progress === 1) return 100
            if (progress > 0 && progress < 1) {
                return parseInt(progress * 100)
            }
        }
    },
    watch: {
        info() {
            //console.log("监听文件变化")
            //this.setFile()
        }
    },
    mounted() {
        this.setFile()
    },
    methods: {
        setFile() {
            if (this.info) {
                this.file.exten = this.info?.fileType
                this.file.size = this.info?.fileSize
                this.file.path = this.info?.filePath
            } else {
                this.info = {}
            }

        },
        setProgress(progress) {
            this.progress = progress;
        },
        preview() {
            console.log("查看", this.file)
            if (this.file.path) {
                window.open(this.fullPath(this.file.path))
            }
            //window.open(this.fullPath(this.info.filePath))
        },
        remove() {
            //this.$emit("change", null)
            this.progress = -2
            this.file = {}
            //$message.warn("文件恢复")
            //this.setFile()
        },
        fullPath(val) {
            return window.$fileFullPath(val)
        },
        chooseFile() {
            $chooseFile({
                count: 1,
                success: (files) => {
                    this.file = files[0]
                    this.$emit("change", files[0])
                }
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.ResourceFile {
    position: relative;
    width: 100%;
    .choose {
        width: 100%;
        height: 40px;
        border-radius: 6px;
        box-sizing: border-box;
        border: 1px dashed var(--el-color-primary);
        cursor: pointer;
        color: var(--el-color-primary);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        line-height: 20px;
        font-size: 14px;
        &:active {
            opacity: 0.8;
        }
    }

    .file {
        width: 100%;
        height: 40px;
        border-radius: 6px;
        box-sizing: border-box;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        //border: 1px solid var(--el-color-primary);
        cursor: pointer;
        color: var(--el-color-primary);
        .pdf-file {
            color: var(--el-color-danger);
        }
    }

    .progress-bar {
        width: 140%;
        margin-top: 2px;

        .el-progress--line {
            width: 100%;
        }
    }

    .actions {
        margin-top: 2px;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: flex-start;
    }
}
</style>
